<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <!--<filter-tool class="filtertool" type="companyId" test="name" v-on:confirm="filterEvent"></filter-tool>-->
          <filter-tool class="filtertool" type="categoryId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <el-button size="mini" @click="addProductBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="productList" v-if="productList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-width="80px">
            <el-form-item label="属性：">
              <el-input size="mini" v-model="props.row.properties" v-if="props.row.edit"></el-input>
              <div v-for="(v,k,i) in makePropUi(props.row.properties)" :key="i">
                <span v-if="k !== ''">{{k}}：{{v}}</span>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column label="名称">
        <template slot-scope="scope">
          <el-input v-if="scope.row.edit" size="mini" v-model="scope.row.name"></el-input>
          <div v-show="!scope.row.edit">{{scope.row.name}}</div>
        </template>
      </el-table-column>
      <el-table-column label="产品类型" >
        <template slot-scope="scope">
          <el-cascader v-if="productCategoryList" size="mini" :options="productCategoryList" change-on-select
                       :props="defaultProps" v-model="scope.row.data.categoryList" :show-all-levels="false" :disabled="true"/>
        </template>
      </el-table-column>
      <el-table-column label="规格" width="155" prop="productSpecs">
        <template slot-scope="scope">
          <el-button type='primary' size="mini" icon="edit" @click="setSpecBtn(scope.row)">规格管理</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="255">
        <template slot-scope="scope">
          <i class="el-icon-edit" style="color:blue;font-size: 16px;font-weight: bold" @click="confirm(scope.row)"/>
          <i class="el-icon-close" style="color:red;font-size: 16px;font-weight: bold;margin-left: 10px" @click="del(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <div>
      <batch-tool :titleList="titleList" v-on:operateEvent="operateEvent"></batch-tool>
    </div>

    <el-dialog :title="currProduct.name+'-规格管理'" :visible.sync="specDialog" v-if="currProduct" :close-on-click-modal="false">
      <spec :productId="currProduct.id"></spec>
    </el-dialog>
    <el-dialog title="生成入库任务" :visible.sync="inboundDialog" v-if="selProductList.length>0">
      <inbound-job :itemlist="selProductList" v-on:successEvent="getProductList(0,filterObj)" ></inbound-job>
    </el-dialog>
    <el-dialog :title="currProduct.id?'编辑':'新建'" :visible.sync="newProductDialog" v-if="newProductDialog">
      <new-product :product="currProduct" v-on:confirm="confirmProductBtn"></new-product>
    </el-dialog>

  </section>
</template>

<script>
  import inboundJob from './inboundJob'
  import batchTool from '@/common/batchTool'
  import filterTool from '@/common/filterTool'
  import searchTool from '@/common/searchTool'
  import spec from './productSpec'
  import newProduct from './newProduct'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "product",
    components:{spec,newProduct,searchTool,filterTool,batchTool,inboundJob},
    data() {
      return {
        productList:null,
        totalPage:0,
        productCategoryList:null,
        currProduct:null,
        specDialog:false,
        newProductDialog:false,
        defaultProps: {
          value:'id',
          children: 'childrens',
          label: 'name'
        },
        filterObj:{},
        selProductList:[],
        titleList:['生成入库任务'],
        inboundDialog:false
      }
    },
    created() {
      this.getProductCategoryList()//加载产品类型列表
      this.getProductList()//加载公司下产品列表
    },
    mounted() {
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch: {},
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      filterEvent(e,objK){
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k]){
            tmp[k]=this.filterObj[k]
          }
        }
        this.getProductList(0,tmp)//加载公司下产品列表
      },
      searchProductEvent(e){
        console.log('搜索条来的----',e)
        this.filterObj.key=e
        this.getProductList(0,this.filterObj)
      },
      makePropUi(properties){
        properties=properties.replace('；',';')
        properties=properties.replace('：',':')
        let kv={}
        let tmp = properties.split(';')
        if(tmp.length>0){
          tmp.forEach(t=>{
            let tmp2=t.split(':')
            kv[tmp2[0]]=tmp2[1]
          })
        }
        console.log(kv)
        return kv
      },
      goPage(val){
        this.getProductList(val-1,this.filterObj)
      },
      getProductList(pageNo,filterObj){
        this.fetch({name:"getProductList",data:{page:pageNo?pageNo:0,companyId:this.department.companyId,...filterObj}})
          .then(res=>{
            console.log('产品列表-----',res,this.department)
            this.productList=res.content
            this.totalPage=res.totalPages
            this.newProductDialog=false
            this.inboundDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      addProductBtn(){
        this.currProduct={companyId:this.department.companyId,properties:'',data:{unit:''}}
        this.newProductDialog=true
      },
      confirmProductBtn(data){
        console.log('dialog里传来参数——————————',data)
        if(data.id){
          this.updateProduct(data)
          //更新
        }else {
          //新建
          this.createProduct(data)
        }
      },
      createProduct(data){
        console.log(this.productList)
        // companyId、categoryId、name、sn、properties、
        this.fetch({name:"createProduct",data})
          .then(res=>{
            console.log(res)
            this.getProductList(0,this.filterObj)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            console.log(res)
            this.productCategoryList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirm(row){
        this.currProduct=row
        this.newProductDialog=true
      },
      cancelBtn(row){//取消按钮
        if(row.edit === undefined){
          Vue.set(row,'edit',false)//后续添加属性，需要vue联动
        }else {
          row.edit =false
        }
      },
      del(row){//删除按钮
        this.loading=true
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"delProduct",data:{id:row.id}})
              .then(res=>{
                this.loading=false
                this.getProductList(0,this.filterObj)
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
            this.loading = false
          })
      },
      updateProduct(row){
        this.fetch({name:"updateProduct",data:{...row}})
          .then(res=>{
            console.log(res)
            this.loading=false
            this.getProductList(0,this.filterObj)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      setSpecBtn(row){
        this.currProduct=row
        this.specDialog=true
      },

      handleSelectionChange(e){
        console.log('多选事件----',e)
        this.selProductList=[]
        e.forEach(g=>{
          let data={
            categoryList:g.data.categoryList,
            department:{id:this.department.id,name:this.department.name},
            company:{id:this.department.companyId,name:this.department.companyName},
          }
          let tmp={
            id:g.id,specs:g.productSpecs,name:g.name,data
          }
          this.selProductList.push(tmp)
        })
      },
      operateEvent(e){
        console.log('-------',e,this.titleList)
        console.log('多选之后----',this.selProductList)
        if(e===0){
          if(this.selProductList.length <=0){
            this.$message({type:'error',message:'请至少选择一个产品'})
            return
          }
          this.inboundDialog=true
        }
      },
    }
  }
</script>

<style scoped>
  .filtertool{
    margin: 0 5px;
    width: 110px;
    border:0px solid red;
  }
</style>
